<template>
  <div class="body">
    <el-row style="display: flex; align-items: center">
      <el-col :span="2" style="text-align: center"> 产品名称 </el-col>
      <el-col :span="3" style="margin-left: 15px">
        <el-input v-model="ser.product_name" placeholder="产品名称" />
      </el-col>
      <!-- <el-col :span="1" style="margin-left: 15px; text-align: center">
        颜色
      </el-col>
      <el-col :span="3" style="margin-left: 15px">
        <el-select v-model="ser.color_id" placeholder="请选择产品颜色">
          <el-option
            v-for="item in ColorList"
            :key="item.id"
            :label="item.color"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col> -->
      <el-col :span="5">
        <el-button class="add_btn" icon="el-icon-search" @click="sre_click(0)"
          >搜索</el-button
        >
        <el-button
          @click="add_product"
          v-permission="'system:users:add'"
          icon="el-icon-plus"
          class="add_btn"
          >新增产品</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="productList"  v-loading="loading"   stripe style="width: 100%" border>
      <el-table-column prop="id" label="产品id" width="180"> </el-table-column>
      <el-table-column prop="product_name" label="产品名称"> </el-table-column>
      <!-- <el-table-column label="颜色">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.color"
            :key="index"
            style="display: block"
          >
            {{ item.color }}</span
          >
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="所需工种">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.job_type"
            :key="index"
            style="display: block"
            >{{ item.pivot.sort }}-{{ item.job_type }}</span
          >
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            @click="set_product(scope.row)"
            style="margin-right: 15px"
            type="text"
            >编辑</el-button
          >
          <el-button
            @click="set_product_number(scope.row)"
            style="margin-right: 15px"
            type="text"
            >型号管理</el-button
          >
          <el-button
            @click="set_product_jobtype(scope.row)"
            style="margin-right: 15px"
            type="text"
            >工种管理</el-button
          >
          <el-button @click="set_product_color(scope.row)" type="text"
            >颜色管理</el-button
          >
          <!-- <el-button
            @click="get_modenumber(scope.row.id, scope.row.product_name)"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.model_number.length > 0"
          >
            型号</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="isProduct"
      width="30%"
      @close="dialog_close"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="产品名称" prop="product_name">
          <el-input v-model="ruleForm.product_name"></el-input>
        </el-form-item>

        <el-form-item label="产品模型" prop="modelid">
          <el-select
            v-model="ruleForm.modelid"
            filterable
            placeholder="请选择产品模型"
            style="width: 70%"
          >
            <el-option
              v-for="item in ModelList"
              :key="item.modelid"
              :label="item.modelname"
              :value="item.modelid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="工种">
          <el-select
            v-model="job_typelist"
            multiple
            filterable
            placeholder="请选择工种"
            :disabled="istype"
            @change="selectchange"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in dataList"
              :key="index"
              :label="item.job_type"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button
            @click="yes_job_typ"
            style="
              margin-left: 15px;
              margin-top: 10px;
              background-color: #0a6e7e;
              color: aliceblue;
            "
            >确认工种</el-button
          >
          <el-button
            @click="
              istype = false;
              issort = false;
            "
            style="
              margin-left: 15px;
              margin-top: 10px;
              background-color: #0a6e7e;
              color: aliceblue;
            "
            >修改工种</el-button
          >
        </el-form-item> -->
        <!-- <el-form-item label="工种排序" v-if="ruleForm.job_type.length > 0">
          <div style="width: 100%">
            <div
              v-for="(item, index) in ruleForm.job_type"
              :key="index"
              style="margin-top: 5px; margin-left: 15px"
            >
              <el-input
                v-model="item.sort"
                type="number"
                :disabled="issort"
                style="width: 100px"
              ></el-input>
              <span style="margin-left: 15px">{{ item.job_typ }}</span>
            </div>
          </div>
          <div style="width: 100%">
            <el-button
              @click="yes_job_typs"
              style="
                margin-left: 15px;
                margin-top: 10px;
                height: 40px;
                background-color: #0a6e7e;
                color: aliceblue;
              "
              >确认排序
            </el-button>
            <el-button
              @click="issort = false"
              style="margin-left:margin-top:10px;15px;height: 40px; background-color: #0a6e7e;color: aliceblue;"
              >修改排序
            </el-button>
          </div>
        </el-form-item> -->
        <!-- <el-form-item label="序号" prop="sort">
          <el-input v-model="ruleForm.sort"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct = false">取 消</el-button>
        <el-button type="primary" @click="submitadd('ruleForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 型号列表 -->
    <el-dialog
      :title="title_2"
      :visible.sync="isProduct_2"
      width="30%"
      @close="dialog_close_modenumber"
      :close-on-click-modal="false"
    >
      <el-table :data="modenumber_List" stripe style="width: 100%" border>
        <el-table-column prop="model_number" label="型号名称">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange_2"
          @current-change="handleCurrentChange_2"
          background
          @prev-click="prev_2"
          @next-click="next_2"
          :current-page.sync="pagination.page"
          :page-size="pagination.per_page"
          layout="total, prev, pager, next"
          :total="mode_total"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct_2 = false">确定</el-button>
      </span>
    </el-dialog>

    <!-- 工种排序  -->
    <el-dialog
      title="工种排序"
      :visible.sync="isProduct_4"
      width="70%"
      @close="dialog_close_gz"
      :close-on-click-modal="false"
    >
      <div class="super-flow-demo1">
        <div class="node-container">
          <span
            class="node-item"
            v-for="(item, index) in nodeItemList"
            :key="index"
            @mousedown="(evt) => nodeItemMouseDown(evt, item.value)"
          >
            {{ item.label }}
          </span>
        </div>
        <div class="flow-container" ref="flowContainer">
          <super-flow
            ref="superFlow"
            :link-menu="linkMenu"
            :link-base-style="linkBaseStyle"
            :link-style="linkStyle"
            :link-desc="linkDesc"
          >
            <template v-slot:node="{ meta }">
              <div
                @mouseup="nodeMouseUp"
                @click="nodeClick"
                class="flow-node ellipsis"
              >
                {{ meta.name }}
              </div>
            </template>
          </super-flow>
        </div>
      </div>
      <!-- <div class="container" ref="container"></div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct_4 = false" type="primary" size="small"
          >取 消</el-button
        >
        <el-button @click="set_ProductJobTypeSort" type="primary" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :title="drawerConf.title"
      :visible.sync="drawerConf.visible"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        @keyup.native.enter="settingSubmit"
        @submit.native.prevent
        v-show="drawerConf.type === drawerType.node"
        ref="nodeSetting"
        :model="nodeSetting"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input
            v-model="nodeSetting.name"
            placeholder="请输入节点名称"
            maxlength="30"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="节点描述" prop="desc">
          <el-input
            v-model="nodeSetting.desc"
            placeholder="请输入节点描述"
            maxlength="30"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-form
        @keyup.native.enter="settingSubmit"
        @submit.native.prevent
        v-show="drawerConf.type === drawerType.link"
        ref="linkSetting"
        :model="linkSetting"
      >
        <el-form-item label="连线描述" prop="desc">
          <el-input v-model="linkSetting.desc" placeholder="请输入连线描述">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drawerConf.cancel"> 取 消 </el-button>
        <el-button type="primary" @click="settingSubmit"> 确 定 </el-button>
      </span>
    </el-dialog>

    <!-- 添加型号-->
    <el-dialog
      title="添加及关联型号"
      :visible.sync="isProduct_number"
      width="50%"
      :close-on-click-modal="false"
      @close="add_modenumberclose"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="单个添加" name="model_number_first">
          <el-row v-if="activeName == 'model_number_first'">
            <el-col>
              <el-input
                type="text"
                v-model="add_modenumber.model_number"
                placeholder="请输入型号名称"
              >
              </el-input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 15px">
            <el-col>
              <uplodeImg
                :value="imgUrl"
                :limit="limit"
                @subImg="subImg"
                ref="Upload"
              ></uplodeImg>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane
          label="产品型号"
          name="model_number_second"
          :disabled="NumberList.length == 0"
        >
          <el-table
            v-if="activeName == 'model_number_second'"
            ref="multipleTable"
            :data="NumberList"
            style="width: 100%"
            height="300"
          >
            <!-- <el-table-column
          type="selection"
          width="55">
        </el-table-column> -->
            <el-table-column label="型号名称" prop="model_number">
            </el-table-column>
            <el-table-column label="型号图片">
              <template slot-scope="scope">
                <img
                  :src="uploadImgUrl + scope.row.file.file_url"
                  v-if="scope.row.file"
                  style="width: 70px"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <!-- <el-button
                  type="text"
                  @click="set_puoduct_specification(scope.row)"
                  style="margin-right: 15px"
                  >添加规格</el-button
                > -->

                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除这条数据？"
                  @confirm="del_model_number_product(scope.row.id)"
                >
                  <el-button slot="reference" type="text" icon="el-icon-delete">
                    移除型号</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="所有型号" name="model_number_three">
          <el-row
            style="display: flex; align-items: center"
            v-if="activeName == 'model_number_three'"
          >
            <el-col :span="4" style="text-align: center">
              <span> 产品：</span>
            </el-col>
            <el-col :span="10">
              <el-select
                v-model="productselect_id"
                placeholder="请选择"
                @change="product_change"
              >
                <el-option
                  v-for="item in productList"
                  :key="item.id"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="10">
              <el-button @click="productselect">重置</el-button>
            </el-col>
          </el-row>
          <el-table
            v-if="activeName == 'model_number_three'"
            ref="multipleTable"
            :data="NumberLists"
            tooltip-effect="dark"
            style="width: 100%"
            height="300"
            @selection-change="SelectionChange_number"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="型号名称" prop="model_number">
            </el-table-column>
            <el-table-column label="型号图片">
              <template slot-scope="scope">
                <img
                  :src="uploadImgUrl + scope.row.file.file_url"
                  style="width: 70px"
                  v-if="scope.row.file"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="set_model_number(scope.row)"
                  style="margin-right: 15px"
                  >编辑</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除这条数据？"
                  @confirm="del_model_number(scope.row)"
                >
                  <el-button slot="reference" type="text" icon="el-icon-delete">
                    删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct_number = false" style="margin-right: 15px"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="Submit_number(1)"
          v-if="activeName == 'model_number_first'"
        >
          确 定
        </el-button>
        <el-button
          type="primary"
          @click="Submit_number(2)"
          v-if="activeName == 'model_number_three'"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 添加颜色 -->
    <el-dialog
      title="关联颜色"
      :visible.sync="isProduct_color"
      width="30%"
      @close="dialog_close"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName_color">
        <el-tab-pane label="关联颜色" name="model_color_first">
          <el-select
            style="width: 100%"
            filterable
            multiple
            allow-create
            v-model="add_color.color_names"
            placeholder="请选择颜色"
          >
            <el-option
              v-for="item in ColorList"
              :key="item.id"
              :label="item.color"
              :value="item.color"
            >
            </el-option>
          </el-select>
        </el-tab-pane>
        <el-tab-pane label="产品颜色" name="model_color_tow">
          <el-table
            ref="multipleTable"
            :data="product_ColorList"
            style="width: 100%"
            height="300"
          >
            <el-table-column label="颜色名称" prop="color"> </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除这条数据？"
                  @confirm="del_ProductColor(scope.row.id)"
                >
                  <el-button slot="reference" type="text" icon="el-icon-delete">
                    移除颜色</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct_color = false" style="margin-right: 15px"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="Submit_color"
          v-if="activeName_color == 'model_color_first'"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="型号修改"
      :visible.sync="isset_model_number"
      width="30%"
      @close="dialog_close"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col>
          <el-input
            type="text"
            v-model="sets_model_number.model_number"
            placeholder="请输入型号名称"
          ></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col>
          <uplodeImg
            :value="imgUrls"
            :limit="limit"
            @subImg="subImgs"
            ref="Uploads"
          ></uplodeImg>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="isset_model_number = false"
          style="margin-right: 15px"
          >取 消</el-button
        >
        <el-button type="primary" @click="Submit_number_set"> 确 定 </el-button>
      </span>
    </el-dialog>

    <bigimg
      :imgurl="bigurl"
      :product="bigproduct"
      :model_number="bigmodel_number"
      ref="img_big"
    ></bigimg>

    <!-- 关联规格 -->
    <el-dialog
      title="关联规格"
      :visible.sync="isProduct_specification"
      width="50%"
      @close="dialog_close"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName_color">
        <el-tab-pane label="关联规格" name="model_color_first">
          <el-select
            style="width: 100%"
            v-model="add_specification.specification_ids"
            placeholder="请选择规格"
            multiple
            filterable
            allow-create
          >
            <el-option
              v-for="item in product_specificationlist"
              :key="item.id"
              :label="item.specification"
              :value="item.specification"
            >
            </el-option>
          </el-select>
        </el-tab-pane>
        <el-tab-pane label="产品规格" name="model_color_tow">
          <el-table
            ref="multipleTable"
            :data="product_specificationlists"
            style="width: 100%"
            height="300"
            @selection-change="SelectionChange_number"
          >
            <el-table-column label="规格名称" prop="specification">
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除这条数据？"
                  @confirm="del_product_specification(scope.row.id)"
                >
                  <el-button slot="reference" type="text" icon="el-icon-delete">
                    移除规格</el-button
                  >
                </el-popconfirm>

                <el-button
                  @click="add_jobtype_jiage(scope.row.id)"
                  type="text"
                  style="margin-left: 10px"
                  >添加工价</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="isProduct_specification = false"
          style="margin-right: 15px"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="Submit_specificationlists"
          v-if="activeName_color == 'model_color_first'"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="关联工种"
      :visible.sync="isProduct_jobtype"
      width="60%"
      @close="dialog_close"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName_jobtype">
        <el-tab-pane label="关联工种" name="model_jobtype_first">
          <el-select
            v-model="add_job_type.job_type_ids"
            multiple
            filterable
            placeholder="请选择工种"
            :disabled="istype"
            @change="selectchange"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in dataList"
              :key="index"
              :label="item.job_type"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-tab-pane>
        <el-tab-pane label="产品工种" name="model_jobtype_tow">
          <el-button @click="set_products" type="primary" size="small"
            >工种排序</el-button
          >
          <el-table
            ref="multipleTable"
            :data="ProductJobTypeList"
            style="width: 100%"
            height="300"
          >
            <el-table-column label="工种名称" prop="job_type">
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除这条数据？"
                  @confirm="del_Productjob_type(scope.row.id)"
                >
                  <el-button slot="reference" type="text" icon="el-icon-delete">
                    移除关联</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct_jobtype = false" style="margin-right: 15px"
          >取 消</el-button
        >
        <el-button
          type="primary"
          v-if="activeName_jobtype == 'model_jobtype_first'"
          @click="Submit_jobtype_set"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设置产品-型号-规格-工种价格"
      :visible.sync="is_jobtype_pice"
      width="30%"
      @close="dialog_close"
      :close-on-click-modal="false"
    >
      <div class="lis" v-for="item in ProductJobTypeList_sp" :key="item.id">
        <el-row
          style="
            display: flex;
            align-items: center;
            margin-top: 5px;
            justify-content: center;
          "
        >
          <el-col :span="10" style="text-align: center">
            <span>{{ item.job_type }}</span>
          </el-col>
          <el-col :span="10">
            <el-input-number v-model="item.price"></el-input-number>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_jobtype_pice = false" style="margin-right: 15px"
          >取 消</el-button
        >
        <el-button type="primary" @click="set_JobTypePriceBySpecificationId">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import LogicFlow from "@logicflow/core";
// import "@logicflow/core/dist/style/index.css";
import uplodeImg from "@/components/ImageUpload";
import SuperFlow from "vue-super-flow";
import bigimg from "@/components/bigimg";
import "vue-super-flow/lib/index.css";
import {
  getProductList,
  createProduct,
  getJobTypeListDropDown,
  getColorList,
  getModelNumberList,
  getModelNumberByProduct,
  createModelNumber,
  delModelNumber,
  batchAddModelNumber,
  addProductColor,
  getProductColorList,
  delProductColor,
  getSpecificationList,
  addProductJobType,
  getProductJobTypeList,
  delProductJobType,
  createSpecification,
  delSpecification,
  delProductModelnumber,
  getProductJobTypeSort,
  setProductJobTypeSort,
  setJobTypePriceBySpecificationId,
  getJobTypePriceBySpecificationId,
  createColor,
  getModelList
} from "@/api/product/index";
const drawerType = {
  node: 0,
  link: 1,
};
export default {
  components: {
    SuperFlow,
    uplodeImg,
    bigimg,
  },
  data() {
    return {
      ModelList:[],
      loading:true,
      product_specification_id: "",
      is_jobtype_pice: false,
      ProductJobTypeList_sp: [],
      activeName_jobtype: "model_jobtype_first",
      isProduct_jobtype: false,

      isProduct_specification: false,
      isset_model_number: false,
      bigurl: "",
      bigproduct: "",
      bigmodel_number: "",
      uploadImgUrl: this.$global.imgQianJui,
      limit: 1,
      imgUrls: "",
      imgUrl: "",
      activeName_color: "model_color_first",
      activeName: "model_number_first",
      isProduct_color: false,
      isProduct_number: false,
      drawerType,
      drawerConf: {
        title: "",
        visible: false,
        type: null,
        info: null,
        open: (type, info) => {
          const conf = this.drawerConf;
          conf.visible = true;
          conf.type = type;
          conf.info = info;
          if (conf.type === drawerType.node) {
            conf.title = "节点";
            if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields();
            this.$set(this.nodeSetting, "name", info.meta.name);
            this.$set(this.nodeSetting, "desc", info.meta.desc);
          } else {
            conf.title = "连线";
            if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields();
            this.$set(
              this.linkSetting,
              "desc",
              info.meta ? info.meta.desc : ""
            );
          }
        },
        cancel: () => {
          this.drawerConf.visible = false;
          if (this.drawerConf.type === drawerType.node) {
            this.$refs.nodeSetting.clearValidate();
          } else {
            this.$refs.linkSetting.clearValidate();
          }
        },
      },
      linkSetting: {
        desc: "",
      },
      nodeSetting: {
        name: "",
        desc: "",
      },

      dragConf: {
        isDown: false,
        isMove: false,
        offsetTop: 0,
        offsetLeft: 0,
        clientX: 0,
        clientY: 0,
        ele: null,
        info: null,
      },
      nodeItemList: [],
      linkMenu: [
        [
          {
            label: "删除",
            selected: (link) => {
              link.remove();
              console.log(link);
            },
          }
        ],
      ],
      linkBaseStyle: {
        color: "#666666", // line 颜色
        hover: "#FF0000", // line hover 的颜色
        textColor: "#666666", // line 描述文字颜色
        textHover: "#FF0000", // line 描述文字 hover 颜色
        font: "14px Arial", // line 描述文字 字体设置 参考 canvas font
        dotted: false, // 是否是虚线
        lineDash: [4, 4], // 虚线时生效
        background: "rgba(255,255,255,0.6)", // 描述文字背景色
      },
      fontList: ["14px Arial", "italic small-caps bold 12px arial"],
      isProduct_4: false,
      isProduct_2: false,
      modenumber_List: [],
      ser: {
        product_name: "",
        color: "",
      },
      issort: false,
      istype: false,
      arr1: "",
      title: "",
      isProduct: false,
      productList: [],
      ruleForm: {
        modelid:'',
        product_name: "",
        id: "",
      },
      rules: {
        modelid:[
        {
            required: true,
            message: "请输入产品模型",
            trigger: "blur",
          },
        ],
        product_name: [
          {
            required: true,
            message: "请输入颜色名称，同时添加多个颜色请以, 号隔开",
            trigger: "blur",
          },
        ],
      },
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      dataList: [],
      job_typelist: [],
      job_typepush: [],
      job_typepushs: [],
      ColorList: [],
      product_ColorList: [],
      NumberList: [],
      NumberLists: [],
      mode_total: 0,
      title_2: "",

      sets_model_number: {
        file_id: "",
        model_number: "",
        model_number_id: "",
        product_id: "",
      },
      add_modenumber: {
        file_id: "",
        model_number: "",
        product_id: "",
      },
      add_modenumbers: {
        product_id: "",
        model_number_ids: [],
      },
      productselect_id: "",

      add_color: {
        color_names:[],
        product_ids:[],
      },
      del_color: {
        color_id: "",
        product_id: "",
      },

      product_jobtypelist: [],
      add_job_type: {
        job_type_ids: [],
        product_id: "",
      },
      ProductJobTypeList: [],
      del_jobtype: {
        job_type_id: "",
        product_id: "",
      },
      add_specification: {
        specification_ids: [],
        model_number_id: "",
        product_id: "",
      },
      product_specificationlist: [],
      product_specificationlists: [],
    };
  },
  mounted() {
    this.getlist();
    this.getColor();
    document.addEventListener("mousemove", this.docMousemove);
    document.addEventListener("mouseup", this.docMouseup);
    this.$once("hook:beforeDestroy", () => {
      document.removeEventListener("mousemove", this.docMousemove);
      document.removeEventListener("mouseup", this.docMouseup);
    });
  },
  methods: {
    dialog_close_gz() {
      this.nodeItemList = [];
      this.$refs.superFlow.graph.linkList = [];
      this.$refs.superFlow.graph.nodeList = [];
    },
    set_ProductJobTypeSort() {
      console.log(this.$refs.superFlow);
      let obj = {
        linkList: this.$refs.superFlow.toJSON().linkList,
        nodeList: this.$refs.superFlow.toJSON().nodeList,
        origin: this.$refs.superFlow.toJSON().origin,
      };

      if (this.nodeItemList.length == 0) {
        let obj = {
          product_id: this.del_jobtype.product_id,
          sort_info: this.$refs.superFlow.toJSON(),
        };
        setProductJobTypeSort(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.superFlow.graph.linkList = [];
            this.$refs.superFlow.graph.nodeList = [];
            // this.$refs.superFlow.graph.origin = [];
            this.isProduct_4 = false;
            this.$message.success("提交成功");
          }
        });
      } else {
        this.$message.error("有工种未进行排序！");
        return false;
      }
    },
    del_model_number_product(id) {
      delProductModelnumber({
        product_id: this.add_modenumber.product_id,
        model_number_id: id,
      }),
        then((res) => {
          this.$message.success("提交成功");
          this.getNumber(this.add_modenumbers.product_id);
        });
    },
    get_SpecificationList() {
      getSpecificationList().then((res) => {
        if (res.code == 200) {
          this.product_specificationlist = res.data.data;
        }
      });
    },
    get_SpecificationList_product(product_id, model_number_id) {
      getSpecificationList({
        product_id,
        model_number_id,
      }).then((res) => {
        if (res.code == 200) {
          this.product_specificationlists = res.data.data;
        }
      });
    },
    del_product_specification(id) {
      delSpecification({
        product_id: this.add_specification.product_id,
        model_number_id: this.add_specification.model_number_id,
        specification_id: id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_SpecificationList_product(
            this.add_specification.product_id,
            this.add_specification.model_number_id
          );
        }
      });
    },
    Submit_specificationlists() {
      console.log(this.add_specification);
      createSpecification(this.add_specification).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_SpecificationList_product(
            this.add_specification.product_id,
            this.add_specification.model_number_id
          );
          this.add_specification.specification_ids = [];
        }
      });
    },
    add_jobtype_jiage(id) {
      this.is_jobtype_pice = true;
      this.product_specification_id = id;
      this.get_ProductspecificationJobTypeList(
        this.add_specification.product_id
      );
    },
    // 关联工种及排序
    set_product_jobtype(row) {
      console.log(row);
      this.TypeList();
      this.get_ProductJobTypeList(row.id);
      this.isProduct_jobtype = true;
      this.add_job_type.product_id = row.id;
      this.del_jobtype.product_id = row.id;
      console.log(this.add_job_type.product_id);
      // this.add_job_type.job_type = [];
      // row.job_type.forEach((e) => {
      //   this.job_typelist.push(e.id);
      //   let obj = {
      //     job_type_id: e.id,
      //     job_typ: e.job_type,
      //     sort: e.pivot.sort,
      //   };
      //   this.job_typepush.push(obj);
      //   this.job_typepushs.push(obj);
      //   this.add_job_type.job_type.push(obj);
      // });
    },
    del_Productjob_type(id) {
      this.del_jobtype.job_type_id = id;
      delProductJobType(this.del_jobtype).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_ProductJobTypeList(this.del_jobtype.product_id);
          this.del_jobtype.job_type_id = "";
        }
      });
    },
    get_ProductJobTypeList(id) {
      getProductJobTypeList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ProductJobTypeList = res.data;
        }
      });
    },
    Submit_jobtype_set() {
      if (this.add_job_type.job_type_ids.length == 0) {
        this.$message.success("请选择工种~");
        return false;
      }
      addProductJobType(this.add_job_type).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          // this.isProduct_jobtype=false
          this.get_ProductJobTypeList(this.del_jobtype.product_id);
          this.add_job_type.job_type_ids = [];
        }
      });
    },
    selectchange(ar) {
      console.log(ar);
    },
    TypeList() {
      getJobTypeListDropDown().then((res) => {
        if (res.code == 200) {
          this.dataList = res.data;
        }
      });
    },
    // 添加规格
    set_puoduct_specification(row) {
      this.isProduct_specification = true;
      this.add_specification.model_number_id = row.id;
      this.get_SpecificationList();

      this.get_SpecificationList_product(
        this.add_specification.product_id,
        row.id
      );
    },
    // 查询产品规格工种列表
    get_ProductspecificationJobTypeList(id) {
      this.ProductJobTypeList_sp = [];
      let obj = {
        product_id: this.add_specification.product_id,
        model_number_id: this.add_specification.model_number_id,
        specification_id: this.product_specification_id,
      };
      getJobTypePriceBySpecificationId(obj).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            let obj = {
              job_type: item.job_type.job_type,
              job_type_id: item.job_type.id,
              price: item.price,
            };
            this.ProductJobTypeList_sp.push(obj);
          });
        }
      });
    },
    set_JobTypePriceBySpecificationId() {
      let obj = {
        product_id: this.add_specification.product_id,
        model_number_id: this.add_specification.model_number_id,
        specification_id: this.product_specification_id,
        job_type_price_arr: this.ProductJobTypeList_sp,
      };
      setJobTypePriceBySpecificationId(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.is_jobtype_pice = false;
        }
      });
    },
    del_ProductColor(id) {
      this.del_color.color_id = id;
      delProductColor(this.del_color).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_ProductColorList(this.del_color.product_id);
          this.del_color.color_id = "";
        }
      });
    },
    get_ProductColorList(id) {
      getProductColorList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.product_ColorList = res.data;
        }
      });
    },
    set_product_color(row) {
      this.isProduct_color = true;
      this.add_color.product_ids.push(row.id);
      this.del_color.product_id = row.id;
      this.get_ProductColorList(row.id);
    },
    Submit_color() {
      createColor(this.add_color).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.isProduct_color = false;
          this.add_color = {
            color_names:[],
            product_ids:[],
          };
        }
      });
    },

    del_model_number(row) {
      delModelNumber({
        id: row.id,
        is_del: 1,
        product_id: this.add_modenumbers.product_id,
      }).then((res) => {
        if (res.code == 200) {
          this.isProduct = false;
          this.$message.success("提交成功");
          this.productselect();
          this.getNumber(this.add_modenumbers.product_id);
        }
      });
    },
    subImgs(id) {
      this.sets_model_number.file_id = id;
      console.log(id);
    },
    subImg(id) {
      this.add_modenumber.file_id = id;
      console.log(id);
    },
    // 修改
    set_model_number(row) {
      console.log(row);
      this.isset_model_number = true;
      this.sets_model_number.model_number = row.model_number;
      this.sets_model_number.model_number_id = row.id;
      if (row.file) {
        let imgUrls = this.uploadImgUrl + row.file.file_url;
        this.$nextTick(function () {
          this.imgUrls = imgUrls;
        });
      }
      this.$nextTick(function () {
        this.$refs.Uploads.pus_value();
      });
    },
    // 确定
    Submit_number_set() {
      createModelNumber(this.sets_model_number).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功~");
          this.isset_model_number = false;
          this.productselect();
          this.getNumber(this.add_modenumbers.product_id);
        }
      });
    },
    productselect() {
      this.productselect_id = "";
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.NumberLists = res.data.data;
        }
      });
    },
    product_change(val) {
      console.log(val);
      getModelNumberList({ product_id: val,field_list:'id,model_number',is_dropdown:1 }).then((res) => {
        if (res.code == 200) {
          this.NumberLists = res.data.data;
        }
      });
    },
    push_img(row) {
      this.bigurl = row.file.file_url;
      this.bigproduct = row.product[0].product_name;
      this.bigmodel_number = row.model_number.model_number;
      this.$refs.img_big.open();
    },

    add_modenumberclose() {
      this.add_modenumber = {
        modenumber: "",
        product_id: "",
        file_id: "",
      };

      this.add_modenumbers = {
        product_id: "",
        model_number_ids: [],
      };

      this.productselect_id = "";
      this.imgUrls = "";
      this.imgUrl = "";

      this.sets_model_number = {
        file_id: "",
        model_number: "",
        model_number_id: "",
        product_id: "",
      };

      this.add_specification.product_id = "";
    },
    SelectionChange_number(val) {
      console.log(val);
      val.forEach((item) => {
        this.add_modenumbers.model_number_ids.push(item.id);
      });
    },
    // 添加型号
    Submit_number(type) {
      if (type == 1) {
        if (this.add_modenumber.model_number == "") {
          this.$message.error("请输入型号名称~");
          return false;
        }
        createModelNumber(this.add_modenumber).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功~");
            // this.isProduct_number = false;
            this.getNumber(this.add_modenumbers.product_id);
            this.productselect_id = "";
            this.add_modenumber.model_number = "";
            this.$nextTick(function () {
              this.$refs.Upload.pus_value();
            });
          }
        });
      } else {
        if (this.add_modenumbers.model_number_ids.length == 0) {
          this.$message.error("请选择型号~");
          return false;
        }
        batchAddModelNumber(this.add_modenumbers).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功~");
            this.isProduct_number = false;
            this.getNumber(this.add_modenumbers.product_id);
            this.productselect_id = "";
            this.add_modenumber.model_number = "";
            this.$nextTick(function () {
              this.$refs.Upload.pus_value();
            });
          }
        });
      }
    },
    getNumber(id) {
      getModelNumberList({ product_id: id,field_list:'id,model_number',is_dropdown:1 }).then((res) => {
        if (res.code == 200) {
          this.NumberList = res.data.data;
        }
      });
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.NumberLists = res.data.data;
        }
      });
    },
    // 添加型号开启
    set_product_number(row) {
      this.imgUrls = "";
      this.imgUrl = "";

      this.getNumber(row.id);
      this.add_modenumber.product_id = row.id;
      this.add_modenumbers.product_id = row.id;
      this.sets_model_number.product_id = row.id;
      this.add_specification.product_id = row.id;
      this.isProduct_number = true;
      this.$nextTick(function () {
        this.$refs.Upload.pus_value();
      });
    },
    flowNodeClick(meta) {
      console.log(this.$refs.superFlow.graph);
    },
    linkStyle(link) {
      if (link.meta && link.meta.desc === "1") {
        return {
          color: "red",
          hover: "#FF00FF",
          dotted: true,
        };
      } else {
        return {};
      }
    },
    linkDesc(link) {
      return link.meta ? link.meta.desc : "";
    },
    settingSubmit() {
      const conf = this.drawerConf;
      if (this.drawerConf.type === drawerType.node) {
        if (!conf.info.meta) conf.info.meta = {};
        Object.keys(this.nodeSetting).forEach((key) => {
          this.$set(conf.info.meta, key, this.nodeSetting[key]);
        });
        this.$refs.nodeSetting.resetFields();
      } else {
        if (!conf.info.meta) conf.info.meta = {};
        Object.keys(this.linkSetting).forEach((key) => {
          this.$set(conf.info.meta, key, this.linkSetting[key]);
        });
        this.$refs.linkSetting.resetFields();
      }
      conf.visible = false;
    },
    nodeMouseUp(evt) {
      evt.preventDefault();
    },
    nodeClick() {
      console.log(arguments);
    },
    docMousemove({ clientX, clientY }) {
      const conf = this.dragConf;

      if (conf.isMove) {
        conf.ele.style.top = clientY - conf.offsetTop + "px";
        conf.ele.style.left = clientX - conf.offsetLeft + "px";
      } else if (conf.isDown) {
        // 鼠标移动量大于 5 时 移动状态生效
        conf.isMove =
          Math.abs(clientX - conf.clientX) > 5 ||
          Math.abs(clientY - conf.clientY) > 5;
      }
    },
    docMouseup({ clientX, clientY }) {
      const conf = this.dragConf;
      conf.isDown = false;

      if (conf.isMove) {
        const { top, right, bottom, left } =
          this.$refs.flowContainer.getBoundingClientRect();

        // 判断鼠标是否进入 flow container
        if (
          clientX > left &&
          clientX < right &&
          clientY > top &&
          clientY < bottom
        ) {
          // 获取拖动元素左上角相对 super flow 区域原点坐标
          const coordinate = this.$refs.superFlow.getMouseCoordinate(
            clientX - conf.offsetLeft,
            clientY - conf.offsetTop
          );

          // 添加节点
          for (let i = 0; i < this.nodeItemList.length; i++) {
            if (conf.info.meta.label == this.nodeItemList[i].label) {
              this.nodeItemList.splice(i, 1);
            }
          }
          this.$refs.superFlow.addNode({
            coordinate,
            ...conf.info,
          });
        }
        conf.isMove = false;
      }

      if (conf.ele) {
        conf.ele.remove();
        conf.ele = null;
      }
    },
    nodeItemMouseDown(evt, infoFun) {
      const { clientX, clientY, currentTarget } = evt;
      console.log(evt);

      const { top, left } = evt.currentTarget.getBoundingClientRect();

      const conf = this.dragConf;
      const ele = currentTarget.cloneNode(true);

      Object.assign(this.dragConf, {
        offsetLeft: clientX - left,
        offsetTop: clientY - top,
        clientX: clientX,
        clientY: clientY,
        info: infoFun(),
        ele,
        isDown: true,
      });

      ele.style.position = "fixed";
      ele.style.margin = "0";
      ele.style.top = clientY - conf.offsetTop + "px";
      ele.style.left = clientX - conf.offsetLeft + "px";
      ele.style.zIndex = 99999;
      this.$el.appendChild(this.dragConf.ele);
    },
    get_ProductJobTypeSort() {
      getProductJobTypeSort({ product_id: this.del_jobtype.product_id }).then(
        (res) => {
          if (res.code == 200) {
            if (res.data) {
              console.log(JSON.parse(res.data));
              let obj = JSON.parse(res.data);
              this.isProduct_4 = true;

              setTimeout(() => {
                console.log(this.$refs.superFlow);
                this.$refs.superFlow.linkList = obj.linkList;
                this.$refs.superFlow.nodeList = obj.nodeList;
                this.$refs.superFlow.origin = obj.origin;
              }, 500);
            } else {
              this.ProductJobTypeList.forEach((item) => {
                let obj = {
                  label: item.job_type,
                  value: () => ({
                    width: 120,
                    height: 40,
                    meta: {
                      label: item.job_type,
                      name: item.job_type,
                      id: item.id,
                    },
                  }),
                };
                this.nodeItemList.push(obj);
              });
              this.isProduct_4 = true;
            }
          }
        }
      );
    },
    set_products() {
      this.get_ProductJobTypeSort();
    },
    get_modenumber(id, name) {
      this.modenumber.id = id;
      this.modenumber.name = name;
      getModelNumberByProduct({
        product_id: this.modenumber.id,
        ...this.pagination,
      }).then((res) => {
        if (res.code == 200) {
          this.modenumber_List = res.data.data;
          this.mode_total = res.data.total;
          this.isProduct_2 = true;
          this.title_2 = this.modenumber.name + "的型号列表";
        }
      });
    },
    sre_click(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getProductList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    getColor() {
      getColorList().then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data.data;
        }
      });
    },

    getlist() {
      getProductList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
          this.loading = false;  
        }
      });
    },
    add_product() {
      this.title = "新增产品";
      this.isProduct = true;
      this.$nextTick(function () {
        let ruleForm = {
          product_name: "",
          color_ids: [],
          job_type: [],
          id: "",
          sort: "",
        };
        this.ruleForm = ruleForm;
        this.job_typelist = [];
        this.job_typepush = [];
      });

      this.get_ModelList();
      this.ruleForm.modelid=this.ModelList[0].modelid
      
    },
    get_ModelList(){
      let obj = {
        is_dropdown:1,
      };
      getModelList(obj).then((res) => {
        if (res.code == 200) {
          this.ModelList = res.data;
        }
      });
    },
    submitadd(formName) {
      // if (this.istype == false) {
      //   this.$message.error("请点击确认工种~");
      //   return false;
      // }
      // if (this.issort == false) {
      //   this.$message.error("请点击确认排序~");
      //   return false;
      // }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          createProduct(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.$message.success("提交成功");
              this.getlist();
              this.job_typelist = [];
              this.issort = false;
              this.istype = false;
              this.ruleForm = {
                product_name: "",
                modelid:'',
                // color_ids: [],
                // job_type: [],
                id: "",
                // sort: "",
              };
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    dialog_close() {
      this.ruleForm = {
        product_name: "",
        color_ids: [],
        job_type: [],
        id: "",
        sort: "",
      };
      this.job_typelist = [];
      this.job_typepush = [];
      this.job_typepushs = [];
      this.issort = false;
      this.istype = false;
    },
    set_product(row) {
      // console.log(row.color, this.ruleForm);
      this.ruleForm.product_name = row.product_name;
      this.ruleForm.modelid = row.modelid;

      // row.color.forEach((item) => {
      //   this.ruleForm.color_ids.push(item.pivot.color_id);
      // });
      // this.ruleForm.color_ids = row.color[0].pivot.color_ids
      this.ruleForm.id = row.id;
      this.get_ModelList();  
      this.title = "产品编辑";
      this.isProduct = true;

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },

    handleSizeChange_2(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange_2(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.get_modenumber();
    },
    prev_2() {
      this.pagination.page = this.pagination.page - 1;
      this.get_modenumber();
    },
    next_2() {
      this.pagination.page = this.pagination.page + 1;
      this.get_modenumber();
    },
    dialog_close_modenumber() {
      this.modenumber = {
        id: "",
        name: "",
      };
      this.modenumber_List = [];
    },
  },
};
</script>

<style scoped>
/*定义要拖拽元素的样式*/
.drag {
  background-color: blue !important;
  border: solid 3px red;
}

.chosen {
  background-color: #333 !important;
  color: #fff;
}

.ghost {
  background-color: red !important;
}

.itxst {
  margin: 10px;
  text-align: left;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col + .col {
  margin-left: 10px;
}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
  text-align: left;
}

.item + .item {
  border-top: none;
  margin-top: 6px;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
</style>

<style lang="less">
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.link-base-style-form {
  .el-form-item {
    margin-bottom: 12px;
  }

  padding-bottom: 20px;
  border-bottom: 1px solid #dcdcdc;
}

.super-flow-demo1 {
  margin-top: 20px;
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
  @list-width: 200px;

  > .node-container {
    width: @list-width;
    float: left;
    height: 100%;
    text-align: center;
    background-color: #ffffff;
    overflow: auto;
    padding: 20px 0;
  }

  > .flow-container {
    width: calc(100% - @list-width);
    float: left;
    height: 100%;
    overflow: hidden;
  }

  .super-flow__node {
    .flow-node {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      line-height: 40px;
      padding: 0 6px;
      font-size: 12px;
    }
  }
}

.node-item {
  @node-item-height: 30px;

  font-size: 14px;
  display: inline-block;
  height: @node-item-height;
  width: 120px;
  margin-top: 20px;
  background-color: #ffffff;
  line-height: @node-item-height;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  text-align: center;
  z-index: 6;

  &:hover {
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
  }
}

.container {
  width: 100%;
  height: 500px;
}
</style>
